<template>
  <el-select
    clearable
    filterable
    :multiple="multiple"
    @input="handleInput"
    v-bind="$attrs"
  >
    <el-option
      v-for="item in resourceOptions"
      :key="item.value"
      :label="item.label"
      :value="item.value"
    >
    </el-option>
  </el-select>
</template>

<script>
import { mapState, mapActions } from "vuex";
export default {
  name: "ResourceSelect",
  props: {
    multiple: {
      type: Boolean,
      default() {
        return true;
      }
    }
  },
  data() {
    return {};
  },
  computed: {
    ...mapState({
      resources: (state) => state.basic.resources
    }),
    resourceOptions() {
      return (
        this.resources?.map((item) => {
          return { label: item.name, value: item.resourceId, ...item };
        }) || []
      );
    }
  },
  created() {
    this.loadResources();
  },
  methods: {
    ...mapActions({
      loadResources: "basic/loadResources"
    }),
    handleInput(value) {
      this.$emit("input", value);
    }
  }
};
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped></style>
